import React from 'react';
import { Row, Col, Form } from 'antd';
import { FormUpLoadC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';

class FormUpLoadCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      fileList: [],
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        fileList: [
          { title: 'undefined (1).docx', value: '1688455625415_000_000_1BA12552750F31D2441DA8E6D660D81385CA6496F9743D7C856B81C61AA84C43' },
          { title: '新建文本文档 (2).txt', value: '1688455657354_000_000_0686236139DCCB2B157CBDCB024F0B0A15673738A80617ED36DB75C35600D8E9' },
        ],
      });
    }, 3000);
  }

  handleOnUpload = (e) => {
    console.log('上传', e);
  };

  handleOnRemove = (e) => {
    console.log('删除', e);
  };

  render() {
    return (
      <Form ref={this.formRef} labelWrap={true}>
        <Row style={{ padding: '20px' }}>
          <Col span={6}>
            <SecondHeaderC title='上传基本场景' />
            <FormUpLoadC
              title='上传1' // 显示名称
              dataIndex='formupload1' // Form识别的Item ID
              helper='点击上传'
              multiple={true}
              loading={true}
              isDelete={false}
              onUpload={this.handleOnUpload}
              isButton={false}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='上传基本场景' />
            <FormUpLoadC
              title='禁止上传' // 显示名称
              dataIndex='formupload2' // Form识别的Item ID
              disabled={true}
              formItemLayout={{ labelCol: { span: 6 }, wrapperCol: { span: 6 } }}
              upLoadTitle='显示名称更改'
              showUploadList={false}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='上传异步获取列表信息，不显示title' />
            <FormUpLoadC
              title='异步加载' // Form识别的Item ID
              dataIndex='formupload3'
              value={this.state.fileList}
              showTitle={false}
              fileListLoading={!this.state.fileList.length > 0}
              loading={!this.state.fileList.length > 0}
              max={3}
              onUpload={this.handleOnUpload}
              remove={this.handleOnRemove}
              primaryProps={{ helper: '点击按钮上传' }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='上传基本场景' />
            <FormUpLoadC
              title='指定类型文件' // 显示名称
              dataIndex='formupload4' // Form识别的Item ID
              value={[
                { title: '新建文本文档 (4).txt', value: '1688369264570_000_000_3EB2BE995E5605E547B691112310A96A8D060512B40341E81A88' },
                { title: '新建文本文档.txt', value: '"1688369298451_000_000_CBB22B4E8C540FAC68A8B71823714FAD0164DB5AAEAC038416A7F5C4B208B99C"' },
              ]}
              isDowm={false}
              accept='.txt'
              onUpload={this.handleOnUpload}
              remove={this.handleOnRemove}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='上传基本场景' />
            <FormUpLoadC
              title='文件流' // 显示名称
              dataIndex='formupload5' // Form识别的Item ID
              upLoadType={2}
              onUpload={this.handleOnUpload}
              remove={this.handleOnRemove}
            />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default FormUpLoadCDemo;
